<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>发现</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			/*头部*/
			.mui-bar-nav~.mui-content { padding-top: 54px;}
			.mui-bar-nav { background: #fdd100;}
			.mui-input-row { clear: none;}
			.mui-input-row .mui-icon-clear { right: 70px !important; top: 4px !important;}
			.mui-card{margin-top: 10px;}
			#sliderSegmentedControl { background: #fff ; }
			#sliderSegmentedControl .mui-active { position: relative;color: #FA9101; }
			#sliderSegmentedControl .mui-active:after { content: ''; width: 100%; height: 2px; position: absolute; bottom: 0; left: 0; background: #FA9101; }
			/*list*/
			.mui-slider .mui-slider-group .mui-slider-item .user_img { width: 36px; height: 36px; border-radius:100% ;}
			.mui-scroll .mui-card-header { overflow: hidden;}
			.mui-scroll .mui-card-header::after { content: normal;}
			.mui-card-footer:before, .mui-card-header:after { background-color: #eee;}
			.mui-scroll .mui-card-header .user_name { line-height: 36px; color: #333; font-size: 14px; padding-left: 5px; }
			.mui-scroll .mui-card-header button { float: right; font-size: 12px; padding: 3px 6px; position: relative; top: 7px; color: #f60; border: 1px #f60 solid; }
			.mui-scroll .mui-card-content {}
			.mui-scroll .mui-card-content .videoContainer { position: relative;}
			.mui-scroll .mui-card-content .videoContainer .video_bg { position: absolute; width: 100%; height: 80%; z-index: 1000; }
			.mui-scroll .mui-card-content video { width: 1px; height: 1px; position: absolute; top: -4px; left: -1000px; }
			.mui-scroll .mui-card-content img { width: 100%;}
			.mui-scroll .mui-card-content .video_play { margin: 3px; width: 50px; height: 50px; display: inline-block; text-align: center; background-color: #fff; border: 1px solid #fff; border-radius: 25px; background-clip: padding-box; color: #000; opacity: 0.9; position: absolute; top: 40%; left: 50%; margin-left: -25px;}
			.mui-scroll .mui-card-content .video_play .mui-icon { margin-top: 12px;}
			.mui-scroll .mui-card-content p { display: block; padding: 0 10px 10px 10px; font-size: 13px; line-height: 16px; overflow: hidden ; margin: 0 !important;}
			.mui-scroll .mui-card-content p .mui-badge { border-radius: 4px; background: #fff; color: #666; border: 1px #eee solid; float: left;}
			.mui-scroll .mui-card-content p .num { float: right; line-height: 20px;}
			.mui-scroll .mui-card-footer .mui-card-link{ font-size: 13px; color: #999; border-left: 1px #eee solid; width: 30%; text-align: center; display: inline-block;}
			.mui-scroll .mui-card-footer .mui-card-link:first-child { border: 0;}
			.mui-scroll .mui-card-footer .mui-icon { font-size: 16px; margin-right: 3px;}
			.mui-table-view { background: none;}
			
			.mui-bar~.mui-content .mui-fullscreen {top:44px;height:auto;}
			.mui-pull-top-tips {position:absolute;top:-20px;left:50%;margin-left:-25px;width:40px;height:40px;border-radius:100%; z-index: 100;}
			.mui-bar~.mui-pull-top-tips {top:24px;}
			.mui-pull-top-wrapper {width:42px;height:42px;display:block;text-align:center;background-color:#efeff4;border:1px solid #ddd;border-radius:25px;background-clip:padding-box;box-shadow:0 4px 10px #bbb;overflow:hidden;}
			.mui-pull-top-tips.mui-transitioning {-webkit-transition-duration:200ms;transition-duration:200ms;}
			.mui-pull-top-tips .mui-pull-loading {-webkit-backface-visibility:hidden;-webkit-transition-duration:400ms;transition-duration:400ms;margin:0;}
			.mui-pull-top-wrapper .mui-icon,.mui-pull-top-wrapper .mui-spinner {margin-top:7px;}
			.mui-pull-top-wrapper .mui-icon.mui-reverse {-webkit-transform:rotate(180deg) translateZ(0);}
			.mui-pull-bottom-tips {text-align:center;background-color:#efeff4;font-size:15px;line-height:40px;color:#777;}
			.mui-pull-top-canvas {overflow:hidden;background-color:#fafafa;border-radius:40px;box-shadow:0 4px 10px #bbb;width:40px;height:40px;margin:0 auto;}
			.mui-pull-top-canvas canvas {width:40px;}
			.mui-slider-indicator.mui-segmented-control {background-color:#efeff4;}

		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <h1 class="mui-title">发现</h1>
		</header>
		<div class="mui-content">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active" href="#item1mobile">推荐</a>
						<a class="mui-control-item" href="#item2mobile">美食</a>
						<a class="mui-control-item" href="#item3mobile">居家</a>
						<a class="mui-control-item" href="#item4mobile">综艺</a>
						<a class="mui-control-item" href="#item5mobile">爱美</a>
					</div>
				</div>
			
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<!--list-->
									<li class="mui-card">
										<div class="mui-card-header mui-card-media">
											<img class="user_img" src="img/114x114.png">
											<span class="user_name">大黄广场舞</span>
											<button type="button" class="mui-btn mui-btn-outlined">+ 关注</button>
										</div>
										<div class="mui-card-content">
											<p>我刚发布了一个视频《佛挡杀佛对方答复》范德萨范德萨范德萨发的发第三方，快来看看吧</p>
											<div class="videoContainer"  id="id_test_video">
												<div class="video_bg"></div>
												<video webkit-playsinline class="videoMedia" controls="controls" preload>
													<source src="img/video.mp4" type="video/mp4"></source>
												</video>
												<img src="img/pic2.jpg"/>
												<a class="video_play"><span class="mui-icon mui-icon-forward"></span></a>
												
											</div>
											<p>
												<span class="mui-badge">12</span>
												<span class="num">627次播放</span>
											</p>
										</div>
										<div class="mui-card-footer">
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>8</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>24</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>分享</a>
										</div>
									</li>
									<li class="mui-card">
										<div class="mui-card-header mui-card-media">
											<img class="user_img" src="img/114x114.png">
											<span class="user_name">大黄广场舞</span>
											<button type="button" class="mui-btn mui-btn-outlined">+ 关注</button>
										</div>
										<div class="mui-card-content">
											<p>我刚发布了一个视频《佛挡杀佛对方答复》范德萨范德萨范德萨发的发第三方，快来看看吧</p>
											<div class="videoContainer">
												<div class="video_bg"></div>
												<video webkit-playsinline class="videoMedia" controls="controls" preload>
													<source src="img/video.mp4" type="video/mp4"></source>
												</video>
												<img src="img/pic2.jpg"/>
												<a class="video_play"><span class="mui-icon mui-icon-forward"></span></a>
											</div>
											<p>
												<span class="mui-badge">12</span>
												<span class="num">627次播放</span>
											</p>
										</div>
										<div class="mui-card-footer">
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>8</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>24</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>分享</a>
										</div>
									</li>
									<!--list end-->
								</ul>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<!--list-->
									<li class="mui-card">
										<div class="mui-card-header mui-card-media">
											<img class="user_img" src="img/114x114.png">
											<span class="user_name">大黄广场舞</span>
											<button type="button" class="mui-btn mui-btn-outlined">+ 关注</button>
										</div>
										<div class="mui-card-content">
											<p>我刚发布了一个视频《佛挡杀佛对方答复》范德萨范德萨范德萨发的发第三方，快来看看吧</p>
											<div class="videoContainer">
												<div class="video_bg"></div>
												<video webkit-playsinline class="videoMedia" controls="controls" preload>
													<source src="img/video.mp4" type="video/mp4"></source>
												</video>
												<img src="img/pic2.jpg"/>
												<a class="video_play"><span class="mui-icon mui-icon-forward"></span></a>
											</div>
											<p>
												<span class="mui-badge">12</span>
												<span class="num">627次播放</span>
											</p>
										</div>
										<div class="mui-card-footer">
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>8</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>24</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>分享</a>
										</div>
									</li>
									<li class="mui-card">
										<div class="mui-card-header mui-card-media">
											<img class="user_img" src="img/114x114.png">
											<span class="user_name">大黄广场舞</span>
											<button type="button" class="mui-btn mui-btn-outlined">+ 关注</button>
										</div>
										<div class="mui-card-content">
											<p>我刚发布了一个视频《佛挡杀佛对方答复》范德萨范德萨范德萨发的发第三方，快来看看吧</p>
											<div class="videoContainer">
												<div class="video_bg"></div>
												<video webkit-playsinline class="videoMedia" controls="controls" preload>
													<source src="img/video.mp4" type="video/mp4"></source>
												</video>
												<img src="img/pic2.jpg"/>
												<a class="video_play"><span class="mui-icon mui-icon-forward"></span></a>
											</div>
											<p>
												<span class="mui-badge">12</span>
												<span class="num">627次播放</span>
											</p>
										</div>
										<div class="mui-card-footer">
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>8</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>24</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>分享</a>
										</div>
									</li>
									<!--list end-->
								</ul>
							</div>
						</div>
					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<!--list-->
									<li class="mui-card">
										<div class="mui-card-header mui-card-media">
											<img class="user_img" src="img/114x114.png">
											<span class="user_name">大黄广场舞</span>
											<button type="button" class="mui-btn mui-btn-outlined">+ 关注</button>
										</div>
										<div class="mui-card-content">
											<p>我刚发布了一个视频《佛挡杀佛对方答复》范德萨范德萨范德萨发的发第三方，快来看看吧</p>
											<div class="videoContainer">
												<div class="video_bg"></div>
												<video webkit-playsinline class="videoMedia" controls="controls" preload>
													<source src="img/video.mp4" type="video/mp4"></source>
												</video>
												<img src="img/pic2.jpg"/>
												<a class="video_play"><span class="mui-icon mui-icon-forward"></span></a>
											</div>
											<p>
												<span class="mui-badge">12</span>
												<span class="num">627次播放</span>
											</p>
										</div>
										<div class="mui-card-footer">
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>8</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>24</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>分享</a>
										</div>
									</li>
									<li class="mui-card">
										<div class="mui-card-header mui-card-media">
											<img class="user_img" src="img/114x114.png">
											<span class="user_name">大黄广场舞</span>
											<button type="button" class="mui-btn mui-btn-outlined">+ 关注</button>
										</div>
										<div class="mui-card-content">
											<p>我刚发布了一个视频《佛挡杀佛对方答复》范德萨范德萨范德萨发的发第三方，快来看看吧</p>
											<div class="videoContainer">
												<div class="video_bg"></div>
												<video webkit-playsinline class="videoMedia" controls="controls" preload>
													<source src="img/video.mp4" type="video/mp4"></source>
												</video>
												<img src="img/pic2.jpg"/>
												<a class="video_play"><span class="mui-icon mui-icon-forward"></span></a>
											</div>
											<p>
												<span class="mui-badge">12</span>
												<span class="num">627次播放</span>
											</p>
										</div>
										<div class="mui-card-footer">
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>8</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>24</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>分享</a>
										</div>
									</li>
									<!--list end-->
								</ul>
							</div>
						</div>
					</div>
					<div id="item4mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<!--list-->
									<li class="mui-card">
										<div class="mui-card-header mui-card-media">
											<img class="user_img" src="img/114x114.png">
											<span class="user_name">大黄广场舞</span>
											<button type="button" class="mui-btn mui-btn-outlined">+ 关注</button>
										</div>
										<div class="mui-card-content">
											<p>我刚发布了一个视频《佛挡杀佛对方答复》范德萨范德萨范德萨发的发第三方，快来看看吧</p>
											<div class="videoContainer">
												<div class="video_bg"></div>
												<video webkit-playsinline class="videoMedia" controls="controls" preload>
													<source src="img/video.mp4" type="video/mp4"></source>
												</video>
												<img src="img/pic2.jpg"/>
												<a class="video_play"><span class="mui-icon mui-icon-forward"></span></a>
											</div>
											<p>
												<span class="mui-badge">12</span>
												<span class="num">627次播放</span>
											</p>
										</div>
										<div class="mui-card-footer">
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>8</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>24</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>分享</a>
										</div>
									</li>
									<li class="mui-card">
										<div class="mui-card-header mui-card-media">
											<img class="user_img" src="img/114x114.png">
											<span class="user_name">大黄广场舞</span>
											<button type="button" class="mui-btn mui-btn-outlined">+ 关注</button>
										</div>
										<div class="mui-card-content">
											<p>我刚发布了一个视频《佛挡杀佛对方答复》范德萨范德萨范德萨发的发第三方，快来看看吧</p>
											<div class="videoContainer">
												<div class="video_bg"></div>
												<video webkit-playsinline class="videoMedia" controls="controls" preload>
													<source src="img/video.mp4" type="video/mp4"></source>
												</video>
												<img src="img/pic2.jpg"/>
												<a class="video_play"><span class="mui-icon mui-icon-forward"></span></a>
											</div>
											<p>
												<span class="mui-badge">12</span>
												<span class="num">627次播放</span>
											</p>
										</div>
										<div class="mui-card-footer">
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>8</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>24</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>分享</a>
										</div>
									</li>
									<!--list end-->
								</ul>
							</div>
						</div>
					</div>
					<div id="item5mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<!--list-->
									<li class="mui-card">
										<div class="mui-card-header mui-card-media">
											<img class="user_img" src="img/114x114.png">
											<span class="user_name">大黄广场舞</span>
											<button type="button" class="mui-btn mui-btn-outlined">+ 关注</button>
										</div>
										<div class="mui-card-content">
											<p>我刚发布了一个视频《佛挡杀佛对方答复》范德萨范德萨范德萨发的发第三方，快来看看吧</p>
											<div class="videoContainer">
												<div class="video_bg"></div>
												<video webkit-playsinline class="videoMedia" controls="controls" preload>
													<source src="img/video.mp4" type="video/mp4"></source>
												</video>
												<img src="img/pic2.jpg"/>
												<a class="video_play"><span class="mui-icon mui-icon-forward"></span></a>
											</div>
											<p>
												<span class="mui-badge">12</span>
												<span class="num">627次播放</span>
											</p>
										</div>
										<div class="mui-card-footer">
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>8</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>24</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>分享</a>
										</div>
									</li>
									<li class="mui-card">
										<div class="mui-card-header mui-card-media">
											<img class="user_img" src="img/114x114.png">
											<span class="user_name">大黄广场舞</span>
											<button type="button" class="mui-btn mui-btn-outlined">+ 关注</button>
										</div>
										<div class="mui-card-content">
											<p>我刚发布了一个视频《佛挡杀佛对方答复》范德萨范德萨范德萨发的发第三方，快来看看吧</p>
											<div class="videoContainer">
												<div class="video_bg"></div>
												<video webkit-playsinline class="videoMedia" controls="controls" preload>
													<source src="img/video.mp4" type="video/mp4"></source>
												</video>
												<img src="img/pic2.jpg"/>
												<a class="video_play"><span class="mui-icon mui-icon-forward"></span></a>
											</div>
											<p>
												<span class="mui-badge">12</span>
												<span class="num">627次播放</span>
											</p>
										</div>
										<div class="mui-card-footer">
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>8</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>24</a>
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>分享</a>
										</div>
									</li>
									<!--list end-->
								</ul>
							</div>
						</div>
					</div>
			
				</div>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/mui.pullToRefresh.js"></script>
		<script src="js/mui.pullToRefresh.material.js"></script>
		<script type="text/javascript" src="js/zepto.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init({
				swipeBack:false
			});
			(function($) {
				//阻尼系数
				var deceleration = mui.os.ios?0.003:0.0009;
				$('.mui-scroll-wrapper').scroll({
					bounce: false,
					indicators: true, //是否显示滚动条
					deceleration:deceleration
				});
				$.ready(function() {
					//循环初始化所有下拉刷新，上拉加载。
					$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
						$(pullRefreshEl).pullToRefresh({
							down: {
								callback: function() {
									var self = this;
									setTimeout(function() {
										var ul = self.element.querySelector('.mui-table-view');
										ul.insertBefore(createFragment(ul, index, 10, true), ul.firstChild);
										self.endPullDownToRefresh();
									}, 1000);
								}
							},
							up: {
								callback: function() {
									var self = this;
									setTimeout(function() {
										var ul = self.element.querySelector('.mui-table-view');
										ul.appendChild(createFragment(ul, index, 5));
										self.endPullUpToRefresh();
									}, 1000);
								}
							}
						});
					});
					var createFragment = function(ul, index, count, reverse) {
						var length = ul.querySelectorAll('li').length;
						var fragment = document.createDocumentFragment();
						var li;
						for (var i = 0; i < count; i++) {
							li = document.createElement('li');
							li.className = 'mui-card';
							li.innerHTML = '<div class="mui-card-header mui-card-media">\
											<img class="user_img" src="img/114x114.png">\
											<span class="user_name">大黄广场舞</span>\
											<button type="button" class="mui-btn mui-btn-outlined">+ 关注</button>\
										</div>\
										<div class="mui-card-content">\
											<p>我刚发布了一个视频《佛挡杀佛对方答复》范德萨范德萨范德萨发的发第三方，快来看看吧</p>\
											<div class="videoContainer">\
												<div class="video_bg"></div>\
												<video webkit-playsinline class="videoMedia" controls="controls" preload>\
													<source src="img/video.mp4" type="video/mp4"></source>\
												</video>\
												<img src="img/pic2.jpg"/>\
												<a class="video_play"><span class="mui-icon mui-icon-forward"></span></a>\
											</div>\
											<p>\
												<span class="mui-badge">12</span>\
												<span class="num">627次播放</span>\
											</p>\
										</div>\
										<div class="mui-card-footer">\
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>8</a>\
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>24</a>\
											<a class="mui-card-link"><span class="mui-icon mui-icon-chatboxes"></span>分享</a>\
										</div>';
							fragment.appendChild(li);
						}
						return fragment;
					};
				});
			})(mui);
			mui.plusReady(function() {
				//点击图片播放
				mui(".mui-control-content").on('tap','.videoContainer',function(){ 
					var $this = $(this);
					//是否采用内联播放模式
					var videoMedia = $this.find(".videoMedia");
					//获取视频应该得宽和高
					var videoWidth = videoMedia.parent().attr('offsetWidth');
					var videoHeight = videoMedia.parent().attr('offsetHeight');
					$this.css({'width':videoWidth,'height':videoHeight});
					if (videoMedia[0].paused || videoMedia[0].ended) {
						//暂停时播放
						if (videoMedia[0].ended) {
							videoMedia[0].currentTime = 0;
						}
						$(".videoMedia").each(function(index){
							$(".videoMedia")[index].pause();
						});
						$this.find('img').hide();
						$this.find('.video_play').hide();
						videoMedia.css({'width':videoWidth,'height':videoHeight,"left":"0"});
						videoMedia[0].play();
					} else {
						//播放时暂停
						$(".videoMedia").each(function(index){
							$(".videoMedia")[index].pause();
						});
					}
				});
				//点击图片播放
//				mui(".mui-control-content").on('tap','.full_paly',function(){
//					var mediaTarget = $(this).siblings("video");
//					var url = mediaTarget[0].getElementsByTagName('source')[0].src;
//					if (window.plus && plus.os.name == 'Android') {
//				//非内联模式下的plus下的android才用到
//						var Intent = plus.android.importClass("android.content.Intent");
//						var Uri = plus.android.importClass("android.net.Uri");
//						var main = plus.android.runtimeMainActivity();
//						var intent = new Intent(Intent.ACTION_VIEW);
//						var uri = Uri.parse(url);
//						intent.setDataAndType(uri, "video/*");
//						main.startActivity(intent);
//					} else {
//						//如果是非内敛,ios需要去除内联样式
//						mediaTarget.removeAttr('webkit-playsinline');
//					}
//				});
			});
		</script>
	</body>

</html>